<template>
  <div class="qrcode">
    <img :src="'data:image/png;base64,'+base64_img">
    <button @click="commitText(text)">确认转换</button>
    <textarea
      v-model="text"
      placeholder="在这里输入要转换的文本"
      cols="30"
      rows="10"
      @keyup.enter="commitText(text)"
    ></textarea>
  </div>
</template>

<script>
import { useQRCode } from '@/hooks'
import { watch, ref } from 'vue'
export default {
  name: 'QRCode',
  setup () {
    const { base64_img, commitText } = useQRCode()
    const text = ref('')
    watch(base64_img, () => {
      text.value = ''
    })
    return {
      base64_img,
      commitText,
      text
    }
  }
}

</script>

<style scoped>
.qrcode {
  width: 90vw;
  height: 76vh;
  margin: 10px auto;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  border-radius: 20px;
  box-shadow: 1px 1px 10px;
  overflow: hidden;
  background: #27ae60;
}
textarea {
  font-size: 14px;
  outline: none;
  border-radius: 10px;
  padding: 4px;
}
img {
  width: 50vw;
}
button {
  width: 40vw;
  height: 10vw;
  font-size: 20px;
  border: none;
  outline: none;
}
</style>
